﻿<div>
<MRow Justify="JustifyTypes.Center">
    <MButton Color="primary"
             Class="ma-2"
             Dark
             OnClick="() => dialog = true">
        Open Dialog 1
    </MButton>
<MButton Color="primary"
         Class="ma-2"
         Dark
         OnClick="() => dialog2 = true">
    Open Dialog 2
</MButton>
<MButton Color="primary"
         Class="ma-2"
         Dark
         OnClick="() => dialog3 = true">
    Open Dialog 3
</MButton>


<MMenu Bottom
       OffsetY>
    <ActivatorContent>
        <MButton Class="ma-2" @attributes="@context.Attrs">
            A Menu
        </MButton>
    </ActivatorContent>
    <ChildContent>
        <MList>
            @foreach (var item in items)
            {
                <MListItem OnClick="() => { }">
                    <MListItemTitle>@item</MListItemTitle>
                </MListItem>
            }
        </MList>
    </ChildContent>
</MMenu>
<MDialog @bind-Value="dialog"
         Fullscreen
         Transition="dialog-bottom-transition"
         Scrollable>
    <MCard Tile>
        <MToolbar Flat
                  Dark
                  Color="primary">
            <MButton Icon
                     Dark
                     OnClick="() => dialog = false">
                <MIcon>mdi-close</MIcon>
            </MButton>
            <MToolbarTitle>Settings</MToolbarTitle>
            <MSpacer></MSpacer>
            <MToolbarItems>
                <MButton Dark
                         text
                         OnClick="() => dialog = false">
                    Save
                </MButton>
            </MToolbarItems>
            <MMenu Bottom
                   OffsetY 
                   Right>
                <ActivatorContent>
                    <MButton Dark Icon @attributes="@context.Attrs">
                        <MIcon>mdi-dots-vertical</MIcon>
                    </MButton>
                </ActivatorContent>
                <ChildContent>
                    <MList>
                        @foreach (var item in items)
                        {
                            <MListItem OnClick="() => { }">
                                <MListItemTitle>@item</MListItemTitle>
                            </MListItem>
                        }
                    </MList>
                </ChildContent>
            </MMenu>
        </MToolbar>
        <MCardText>
            <MButton Color="primary"
                     Dark
                     Class="ma-2"
                     OnClick="() => dialog2 = !dialog2">
                Open Dialog 2
            </MButton>
            <MTooltip Right>
                <ActivatorContent>
                    <MButton Class="ma-2" @attributes="@context.Attrs">
                        Tool Tip Activator
                    </MButton>
                </ActivatorContent>
                <ChildContent>
                    <span>Tool Tip</span>
                </ChildContent>
            </MTooltip>
            <MList ThreeLine
                   Subheader>
                <MSubheader>User Controls</MSubheader>
                <MListItem>
                    <MListItemContent>
                        <MListItemTitle>Content filtering</MListItemTitle>
                        <MListItemSubtitle>Set the content filtering level to restrict apps that can be downloaded</MListItemSubtitle>
                    </MListItemContent>
                </MListItem>
                <MListItem>
                    <MListItemContent>
                        <MListItemTitle>Password</MListItemTitle>
                        <MListItemSubtitle>Require password for purchase or use password to restrict purchase</MListItemSubtitle>
                    </MListItemContent>
                </MListItem>
            </MList>
            <MDivider></MDivider>
            <MList ThreeLine
                   Subheader>
                <MSubheader>General</MSubheader>
                <MListItem>
                    <MListItemAction>
                        <MCheckbox @bind-Value="notifications"></MCheckbox>
                    </MListItemAction>
                    <MListItemContent>
                        <MListItemTitle>Notifications</MListItemTitle>
                        <MListItemSubtitle>Notify me about updates to apps or games that I downloaded</MListItemSubtitle>
                    </MListItemContent>
                </MListItem>
                <MListItem>
                    <MListItemAction>
                        <MCheckbox @bind-Value="sound"></MCheckbox>
                    </MListItemAction>
                    <MListItemContent>
                        <MListItemTitle>Sound</MListItemTitle>
                        <MListItemSubtitle>Auto-update apps at any time. Data charges may apply</MListItemSubtitle>
                    </MListItemContent>
                </MListItem>
                <MListItem>
                    <MListItemAction>
                        <MCheckbox @bind-Value="widgets"></MCheckbox>
                    </MListItemAction>
                    <MListItemContent>
                        <MListItemTitle>Auto-add widgets</MListItemTitle>
                        <MListItemSubtitle>Automatically add home screen widgets</MListItemSubtitle>
                    </MListItemContent>
                </MListItem>
            </MList>
        </MCardText>

        <div style="flex: 1 1 auto;"></div>
    </MCard>
</MDialog>

<MDialog @bind-Value="dialog2"
         MaxWidth="500">
    <MCard>
        <MCardTitle>
            Dialog 2
        </MCardTitle>
        <MCardText>
            <MButton Color="primary"
                     Dark
                     OnClick="() => dialog3 = !dialog3">
                Open Dialog 3
            </MButton>
            <MSelect Items="_items"
                     TItem="string"
                     TItemValue="string"
                     TValue="string"
                     Label="Age*"
                     ItemValue="r => r"
                     ItemText="r => r">
            </MSelect>
        </MCardText>
        <MCardActions>
            <MButton Color="primary"
                     Text
                     OnClick="() => dialog2 = false">
                Close
            </MButton>
        </MCardActions>
    </MCard>
</MDialog>


<MDialog @bind-Value="dialog3"
         MaxWidth="500">
    <MCard>
        <MCardTitle>
            <span>Dialog 3</span>
            <MSpacer></MSpacer>
            <MMenu Bottom
                   Left>
                <ActivatorContent>
                    <MButton Icon @attributes="@context.Attrs">
                        <MIcon>mdi-dots-vertical</MIcon>
                    </MButton>
                </ActivatorContent>
                <ChildContent>
                    <MList>
                        @foreach (var item in items)
                        {
                            <MListItem OnClick="() => { }">
                                <MListItemTitle>@item</MListItemTitle>
                            </MListItem>
                        }
                    </MList>
                </ChildContent>
            </MMenu>
        </MCardTitle>
        <MCardActions>
            <MButton Color="primary"
                     Text
                     OnClick="() => dialog3 = false">
                Close
            </MButton>
        </MCardActions>
    </MCard>
</MDialog>
</MRow>
</div>

@code {
    bool dialog = false;
    bool dialog2 = false;
    bool dialog3 = false;
    bool notifications = false;
    bool sound = true;
    bool widgets = false;

    List<string> _items = new() {"0-17", "18-29", "30-54", "54+"};
    List<string> items = new() {"Click Me", "Click Me", "Click Me", "Click Me"};
}